<template>
    <template v-for="item in menu">
        <template v-if="item.children && item.children.length > 0">
            <el-sub-menu :key="item.path" :index="item.path">
                <template #title>
                    <span slot="title"> {{ item.name }}</span>
                </template>
                <MenuTree :menu="item.children" :defaultActive="defaultActive" @clickItem="clickItemHandle" />
            </el-sub-menu>
        </template>
        <template v-else>
            <el-menu-item :index="item.path" @click="clickItemHandle(item)">
                <NuxtLink :to="item.path">
                    <span slot="title">{{ item.name }}</span>
                </NuxtLink>
            </el-menu-item>
        </template>
    </template>
</template>

<script lang="ts" name="MenuTree" setup>

defineProps({
    menu: {
        type: Array as unknown as PropType<any[]>,
        required: true,
        default: () => [],
    },
    defaultActive: {
        type: String as unknown as PropType<string>,
        required: true,
        default: [],
    },
});

const emit = defineEmits(["clickItem"]);

const clickItemHandle = (item) => {
    emit("clickItem", item);
};

</script>